 <template>
   <div class="swi">
         <swiper :options="swiperOption" >
                <swiper-slide v-for="itm in lists" :key='itm.id'>
                  <div class="silre-item" >
                    <img v-lazy="`https://picsum.photos/1160/260?random=${Math.random()*100+10}`" alt="">
                  </div>
                </swiper-slide>
               
         </swiper>
         <div id="swiper-pagination"></div>
      </div>
</template>
<script>



 import { swiper,swiperSlide } from 'vue-awesome-swiper'
 import 'swiper/dist/css/swiper.css'
       export default {
         props:{
          lists:{
            type:Array,
            default:''
          }
            
         },
            data() {
                return {
                  listt:[],
                    swiperOption: {
                        loop: true,
                          autoplay: {
                          stopOnLastSlide: true,
                             },

                        pagination: {
                            el: '#swiper-pagination',
                             type: 'fraction',
                        },
                        effect: 'cube',
                        cubeEffect: {
                            slideShadows: true,
                            shadow: true,
                            shadowOffset: 10,
                            shadowScale: 0.94
                        }
                    }
                }
            },
            components: {
                swiper,
                swiperSlide
            },
            created(){
            
              // console.log('///',this.lists);
            },
          
        }



</script>


<style lang="less" scoped>
  #swiper-pagination {
            width: 100%;
            text-align: center;
        }
        
        .silre-item {
           width: 100%;
            height: 260px;
        }
         .silre-item  img{
           width: 100%;
            height: 260px;
        }
        
        .swi {
            width: 100%;
         
        }


</style>
